<template>
  <div>
    <a-layout id="components-layout-demo-top" class="layout">
      <com-header></com-header>
      <a-layout-content class="container">
        <div v-if="cnsite && path"
             v-html="iframe_src" style="width: 100%; height: 600px;background: #000"></div>
        <div v-else style="width: 100%; height: 600px;line-height: 600px;background: #000">
          <a-empty />
        </div>
        <div style="display: flex;margin: 20px 0">
          <div style="flex: 1;">
            <a-card hoverable>
              <img
                slot="cover"
                alt="example"
                :src="info.img"
              />
            </a-card>
          </div>
          <div style="width: calc(100% - 200px); margin-left: 20px; flex: 0 0 calc(100% - 200px)">
            <a-card hoverable>
              <p>
                <a-icon type="link"/>
                <span>更换资源：</span>
                <a-select
                  label-in-value
                  :default-value="{ key: cnsite }"
                  style="width: 120px"
                  @click="handleChange1"
                >
                  <a-select-option v-for="(item, index) in video"
                                   :key="item.cnsite"
                                   :value="item.cnsite">
                    <a-tag :color="item.cnsite === cnsite ? 'green' : ''">
                      <span>{{ item.cnsite }}</span>
                    </a-tag>
                  </a-select-option>
                </a-select>
                <a-icon style="margin-left: 20px" type="swap"/>
                <span>切换线路：</span>
                <a-select
                  label-in-value
                  :default-value="{ key: jx_url }"
                  @change="handleChange2"
                  style="width: 120px">
                  <a-select-option v-for="(item, index) in jx_urls"
                                   :key="index"
                                   :value="item">
                    <a-tag :color="item === jx_url ? 'pink' : ''">
                      <span>线路{{ index + 1 }}</span>
                    </a-tag>
                  </a-select-option>
                </a-select>
              </p>
              <div style="margin: 20px 0">
                <a-tag @click="path = item.url" style="margin-bottom: 4px;cursor: pointer"
                       v-for="(item, index) in video.filter(el => el.cnsite === cnsite)[0].data"
                       :key="index"
                       :color="item.url === path ? 'red' : ''">
                  <span>{{ index + 1 }}</span>
                </a-tag>
              </div>

              <p style="line-height: 33px;">{{ info.info }}</p>

              <a-collapse accordion>
                <a-collapse-panel key="1" :header="info.title">
                  <p>{{ info.desc }}</p>
                </a-collapse-panel>
              </a-collapse>
            </a-card>
          </div>
        </div>
        <div v-for="(item, index) in video_about"           :key="index">
          <com-title style="margin: 20px 0" :title="item.title"></com-title>
          <a-row :gutter="[16,16]">
            <a-col v-for="cart in item.data" :key="cart.url" :span="4">
              <a-card hoverable @click="set_video_path(cart.url)">
                <img slot="cover" :src="cart.cover" style="width: 100%; height: 153px;object-fit: cover"
                     :alt="cart.desc">
                <a-card-meta :title="cart.title"></a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </div>

        <div>
          <com-title style="margin: 20px 0" :title="about.title"></com-title>
          <a-row :gutter="[16,16]">
            <a-col v-for="cart in about.data" :key="cart.url" :span="4">
              <a-card hoverable @click="set_video_path(cart.url)">
                <img slot="cover" :src="cart.img" style="width: 100%; height: 153px;object-fit: cover"
                     :alt="cart.desc">
                <a-card-meta :title="cart.title"></a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-layout-content>

    </a-layout>
    <com-footer/>
  </div>
</template>

<script>
export default {
  name: "desc-va",
  loading: true,
  //Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。
  // async validate({ params, query, store }) {
  //   // await operations
  //   return true // 如果参数有效
  //   return false // 将停止Nuxt.js呈现页面并显示错误页面
  // },

  key(route) {
    return route.fullPath
  },

  // 或
  layout(context) {
    return 'desc-video'
  },

  head() {
    return {
      title: this.$route.query.title ? `${this.$route.query.title}-视频播放详情` : '视频播放详情',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  },

  watchQuery: true,
  async asyncData({app, $axios, route}) {
    console.log(route.query.url)
    const res1 = await $axios.get('/parse360/info', {
      params: {
        url: route.query.url,
      }
    })

    const {about} = await $axios.get('/parse360/about', {
      params: {
        url: route.query.url,
      }
    })

    let vbof = {
      path: '',
      cnsite: '',
    }

    if((res1.video || []).length) {
      try {
        vbof = {
          path: res1.video[0].data[0].url, // 播放默认第一个视频
          cnsite: res1.video[0].cnsite, // 默认第一个视频源
        }
      } catch (e) { }
    }

    return {
      info: res1.info || {},
      video: res1.video || [],
      video_about: res1.about || [], // ??
      video_type: res1.type, // ??
      about: about || [],
      ...vbof,
    }
  },

  data() {
    return {
      jx_url: 'https://api.jiexi.la/?url=',
      jx_urls: ['https://api.jiexi.la/?url=',
        'http://py.ha12.xyz/ding/index.php?url=',
        'http://lime.whufeng.com/video.php?url=',
        'http://yun.mt2t.com/yun?url=',
        'http://cn.bjbanshan.cn/jiexi.php?url=',
        'http://nitian9.com/?url=',
        'https://jx.618g.com/?url=',
        'http://api.52mss.com/?url=',],
      list: [
        {
          name: '首页',
          classify: 'main'
        },
        {
          name: '首页',
          classify: 'main'
        },
        {
          name: '首页',
          classify: 'main'
        },
      ]
    }
  },

  mounted() {
  },

  computed: {
    iframe_src() {
      return `<iframe style="width: 100%; height: 100%;" src="${this.jx_url + this.path}" frameborder="0" scrolling="no"></iframe>`
    }
  },

  methods: {

    set_video_path(path) {
      this.path = path;
    },
    handleChange1(value) {
      this.cnsite = value.key;
    },
    handleChange2(value) {
      this.jx_url = value.key;
    },

  }
}
</script>

<style lang="scss">

</style>
